<template>
	<view class="all">
		<view class="status_bar"></view>
		<myTopBar title="环境监测" url='../../static/index/img_dr.png'></myTopBar>

		<view class="center-all">
			<view class="center">
				<view class="btn">
					<view class="btn-left">
						CEMS在线监控数据
					</view>
				</view>

				<view class="search-view">
					<!--  日期 -->
					<view class="center-right-">
						<view class="center-right">
							<view  class="center-right-inputSelect">
								<text>日期：</text>
								<input @click="chooseDate" disabled type="text" v-model="data" />
								<view class="center-right-inputSelect-icon" @click="visible=false,chooseIndex=0">
									<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
								</view>
							</view>
						</view>
						<picker-view @click="visible=false,chooseIndex=0" v-if="visible" :value="value" @change="bindChange"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
					</view>

					<!-- 时间 -->
					<!-- <view class="center-right-">
						<view class="center-right">
							<view @click="chooseTime" class="center-right-inputSelect">
								<text>时间：</text>
								<input disabled type="text" v-model="time" />
								<view class="center-right-inputSelect-icon">
									<u-icon color='#58B6E5' :name='visibleTime?"arrow-up-fill":"arrow-down-fill"'>
									</u-icon>
								</view>
							</view>
						</view>
						<picker-view @click="visibleTime=false,chooseIndex=0" v-if="visibleTime" :value="valueTime"
							@change="bindChangeTime" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in hours" :key="index">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}</view>
							</picker-view-column>
						</picker-view>
					</view> -->

					<!-- 污染物 -->
					<view class="center-right-">
						<view class="center-right">
							<view  class="center-right-inputSelect">
								<text>污染物：</text>
								<input @click="chooseThing" disabled type="text" v-model="thing" />
								<view class="center-right-inputSelect-icon" @click="visibleThing=false,chooseIndex=0">
									<u-icon color='#58B6E5' :name='visibleThing?"arrow-up-fill":"arrow-down-fill"'>
									</u-icon>
								</view>
							</view>
						</view>
						<!--  :value="valueThing"-->
						<picker-view @click="visibleThing=false,chooseIndex=0" v-if="visibleThing" @change="bindChangeThing"
							class="picker-view picker-view-thing">
							<picker-view-column>
								<view class="item" v-for="(item,index) in thingList" :key="index">{{item}}</view>
							</picker-view-column>
						</picker-view>

						<view :style="!changeFlag?'background-color: #58B6E5':'background-color: #414ce5'" @click="toSearch" class="center-right-btn">查询</view>
					</view>
				</view>
			</view>

			<view class="image">
				<!-- <image src="../../static/index/img_bj.png" mode="widthFix"></image> -->
				<u-swiper border-radius='0' :list="list" mode="none"></u-swiper>
			</view>

			<!-- 表格 -->
			<view class="center-right-table">
				<view @click="toPageNext" class="btn-left btn-right">
					<view>第三方</view>
					<view>监督检测</view>
				</view>
				<scroll-view scroll-y="true">
					<u-table>
						<u-tr class="u-tr u-tr-title">
							<u-th width="120rpx" class="u-th">最近一次检测日期</u-th>
							<u-th class="u-th">{{tableDataList&&tableDataList.testDate}}</u-th>
						</u-tr>

						<u-tr class="u-tr" :style="'margin-top:30rpx'">
							<u-td width="120rpx">是否存在超标</u-td>
							<u-td>{{tableDataList.qualified==='0'?'是':'否'}}</u-td>
						</u-tr>
						
						<u-tr class="u-tr">
							<u-td width="120rpx">预计下次检测时间</u-td>
							<u-td>{{tableDataList.nextTime}}</u-td>
						</u-tr>
					</u-table>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			let date = new Date()
			let years = []
			let hours = []
			let minutes = []
			let year = date.getFullYear()
			let hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
			let minute = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
			let months = []
			let month = date.getMonth() + 1
			let days = []
			let day = date.getDate()
			// let seconds = []
			// let second = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds()
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			// for (let i = 1; i < 24; i++) {
			// 	hours.push(i)
			// }
			// for (let i = 1; i < 60; i++) {
			// 	minutes.push(i)
			// }
			// for (let i = 1; i < 60; i++) {
			// 	seconds.push(i)
			// }

			return {
				background: {
					backgroundColor: '#2169D3'
				},
				leftTitle: [{
					name: "重要危险源",
				}, {
					name: "安全检查",
				}, {
					name: "工作票检查",
				}],
				years,
				year,
				months,
				month,
				days,
				day,
				// hours,
				// hour,
				// minutes,
				// minute,
				// seconds,
				// second,
				visibleThing: false,
				clickThingFlag: false,
				things: '',
				// visibleTime: false,
				value: [9999, month - 1, day - 1],
				// valueTime: [hour - 1, minute - 1, second],
				visible: false,
				clickFlag: false,
				// clickTimeFlag: false,
				selectIndex: 0,
				tableDataList: {},
				thingList: ['SO₂', 'HCL', 'CO', 'NOₓ', 'Dust'],
				chooseIndex: 0,
				searchFlageData:false,
				searchFlageThing:false,
				list:['../../static/index/img_bj.png'],
				changeFlag:false
			}
		},
		onLoad() {
			this.things = this.thingList[0]
			this.selectNewDetection()
		},
		computed: {
			data() {
				if (this.clickFlag) {
					this.searchFlageData=true
					return this.year + '年' + this.month + '月' + this.day + '日'
				} else {
					return ''
				}
			},
			// time() {
			// 	if (this.clickTimeFlag) {
			// 		return this.hour + '：' + this.minute + '：' + this.second
			// 	} else {
			// 		return ''
			// 	}
			// },
			thing() {
				if (this.clickThingFlag) {
					this.searchFlageThing=true
					return this.things
				} else {
					return ''
				}
			}
		},
		methods: {
			toBack() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			bindChange: function(e) {
				console.log(e.detail.value);
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			// bindChangeTime(e) {
			// 	console.log(e.detail.value);
			// 	this.hour = e.detail.value[0] + 1
			// 	this.minute = e.detail.value[1] + 1
			// 	this.second = e.detail.value[2] + 1
			// },
			bindChangeThing(e) {
				console.log(e.detail.value);
				const val = e.detail.value;
				console.log(this.thingList[val]);
				this.things = this.thingList[val]
			},
			toPage(index) {
				this.selectIndex = index
			},
			toPageNext() {
				uni.navigateTo({
					url: '../environmentalTest-Three/environmentalTest-Three'
				})
			},
			chooseDate() {
				if (this.chooseIndex === 0) {
					this.visible = true;
					this.clickFlag = true;
					this.chooseIndex = 1
					console.log(this.chooseIndex);
				}
			},
			chooseThing(){
				if (this.chooseIndex === 0) {
					this.visibleThing = true;
					this.clickThingFlag = true
					this.chooseIndex = 1
				}
			},
			/* 查询最近一次第三方检测 */
			async selectNewDetection(){
				const res=await this.$u.api.selectNewDetection()
				this.tableDataList=res.body.data
				console.log(this.tableDataList);
				if(!res.success){
					// this.$u.toast(res.msg)
					return;
				}
			},
			async toSearch(){
				this.changeFlag=true
				setTimeout(()=>{
					this.changeFlag=false
				},200)
				
				if(!this.searchFlageData && !this.searchFlageThing){
					this.$u.toast("请先选择好日期和污染物！")
					return;
				}
				let day;
				if (this.month < 10) {
					if (this.day < 10) {
						day = this.year + '-0' + this.month + '-0' + this.day
					} else {
						day = this.year + '-0' + this.month + '-' + this.day
					}
				} else {
					if (this.day < 10) {
						day = this.year + '-' + this.month + '-0' + this.day
					} else {
						day = this.year + '-' + this.month + '-' + this.day
					}
				}
				let thing;
				if(this.thing==='SO₂'){
					thing=1
				}else if(this.thing==='HCL'){
					thing=2
				}else if(this.thing==='CO'){
					thing=3
				}else if(this.thing==='NOₓ'){
					thing=4
				}else if(this.thing==='Dust'){
					thing=5
				}
				const params={
					day:day,
					type:thing
				}
				const res = await this.$u.api.selectPollution(params)
				if(!res.success){
					// this.$u.toast(res.msg)
					return;
				}
				console.log(res.body.data[0].dayImg,res.body.data[0].monthImg);
				this.list=[]
				if(res.body.data[0].dayImg!=''){
					this.list.push(this.$u.baseUrl+res.body.data[0].dayImg)
				}
				if(res.body.data[0].monthImg!=''){
					this.list.push(this.$u.baseUrl+res.body.data[0].monthImg)
				}
				console.log(this.list);
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		/* height: 100vw; */
		overflow: hidden;
	}

	.center-all {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		display: flex;
		margin: 10rpx 0;
	}


	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	.center {
		display: flex;
		flex-direction: column;
	}

	.center-right- {
		margin: 10rpx 0;
	}

	.center-right {
		display: flex;
		margin: 10rpx 20rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 180rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;

	}

	.center-right-inputSelect input {
		width: 110rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
		color: #034AB2;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
		margin-left: 70rpx;
	}

	.search-view {
		margin-left: 20rpx;
	}

	.picker-view {
		position: absolute;
		z-index: 999;
		width: 140rpx;
		height: 100rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
	}

	.picker-view-thing {
		width: 80rpx;
		height: 80rpx;
		margin-left: 100rpx;
	}

	.item {
		/* height: 20px; */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.btn-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 50rpx;
		background: url(../../static/index/button_an.png) no-repeat;
		background-size: 100% 100%;
		font-size: 17rpx;
		color: #FFFFFF;
		margin: 20rpx 0 0 30rpx;
	}

	.btn-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 150rpx;
		height: 80rpx;
		position: relative;
		margin-bottom: 20rpx;
		right: 34rpx;
	}

	.u-swiper-wrap {
		width: 300rpx;
	}

	.image {
		margin-top: 50rpx;
		margin-right: 220rpx;
	}


	/* 表格 */
	.center-right-table {
		position: absolute;
		top: 120rpx;
		right: 20rpx;
		width: 180rpx;

	}

	.u-table {
		/* height: 150rpx !important; */
		white-space: nowrap;
		overflow: hidden;
	}

	.u-tr-title {
		position: fixed;
		width: 180rpx;
	}

	.u-th,
	.u-td {
		font-size: 14rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: left !important;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}



	.u-th {
		background-color: #6096E6 !important;
		color: #FFFFFF !important;
		height: 30rpx !important;
	}

	.u-td {
		color: #000000 !important;
		height: 30rpx !important;
		font-weight: 700;
		background-color: #D2DDF5;
	}
</style>
